<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正方体制作</title>
    <style>
          /* 动画 */

          @keyframes ickt{
            from{
                /* transform: rotateX(30deg) rotateY(30deg) ; */
                /* 从0度开始旋转 */
                transform: rotateX(0deg) rotateY(0deg) ;
            }
            /* 旋转360deg */
            to{
                /* transform: rotateX(390deg) rotateY(390deg) ; */
                /* 从0度开始旋转 */
                transform: rotateX(360deg) rotateY(360deg) ;

            }
            
        }
        
        /* 容器 */
        .container{
            width: 300px;
            height: 300px;
            margin: 200px auto;
            position: relative;
            /* border: 3px solid #FF0; */
            /* 3d渲染 */
            transform-style: preserve-3d;
            /* 给舞台一个角度，就可以看到其他页的面了 */
            transform: rotateX(30deg) rotateY(30deg);
            /* 对整个舞台实用动画 */
            animation: ickt 10s linear infinite;
        }

        .box{
            position: absolute;
            font-size:100px;
            line-height: 300px;
            width: 300px;
            height: 300px;
            color: #FFF;
            text-align: center;
        }
        /* 正面 */
        .box1{
            background: pink;
            transform: translateZ(150px);
        }
        /* 后面 */
        .box2{
            background: orange;
            transform: translateZ(-150px) rotateY(180deg);
            backface-visibility: hidden;

        }
        /* 左侧 */
        .box3{
            background: skyblue;
            transform: translateX(-150px) rotateY(-90deg);

        }
        /* 右侧 */
        .box4{
            background: yellowgreen;
            transform: translateX(150px) rotateY(90deg);

        }
        /* 上面 */
        .box5{
            background: gold;
            /* transform: translateY(150px) rotateX(-90deg); */
            transform: translateY(-150px) rotateX(90deg);

        }
        /* 下面 */
        .box6{
            background: green;
            /* transform: translateY(-150px) rotateX(90deg); */
            transform: translateY(150px) rotateX(-90deg);


        }

      
        
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
    </div>
    
</body>
</html>